<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
            <div class="title">
              <span class="title-text">浦江人事概览</span>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="decorationColors"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <span class="text" @click="goToHomePage">返回首页</span>
              <span class="text" @click="goToFenYangPersonnePage">汾阳</span>
              <span class="text" @click="goToAllPage">全院</span>
            </div>
            <div class="react-left ml-3" style=" width:260px;">
              <span class="text">{{ subtitle[1] }}</span>
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right mr-3" style="background-color: #0f1325;width:250px;" > 
              <span class="text fw-b">{{ subtitle[2]}}</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text">
                {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
                {{ timeInfo.dateDay }}
              </span>
            </div>
          </div>
        </div>
        <div class="body-box">
          <div class="content-box">
            <div class="Piechart">
              <dv-border-box-12 class="Educationlevel">
                <EducationlevelView 
                 :CampusArea="'浦江'"
                />
              </dv-border-box-12>
              <dv-border-box-12 class="Title">
                <TitleView 
                :CampusArea="'浦江'"
                />
              </dv-border-box-12>
              <dv-border-box-12 class="Energylevel">
                <EnergylevelView 
                 :CampusArea="'浦江'"
                />
              </dv-border-box-12>
                <dv-border-box-12 class="Rest">
                <RestsView 
                 :CampusArea="'浦江'"
                />
              </dv-border-box-12>
            </div>
            <div class="IntroductionNurses">
              <div class="up">
              <UpPersonneinfo 
                v-for="index in 8"
                :key="index"
                :title="getUpTtile(index)"
                :randomNumber ="35+'人'"
              />
              </div>
              <div class="down">
                <OutpatientEmergencyView 
                v-for="index in 5"
                :key="index"
                :title="getdownTtile(index)+'病区'"
                :randomNumber ="35+'人'"
              />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
import { formatTime } from "@/utils/index";
import { WEEK } from "@/constant/index";
import useDraw from "@/utils/useDraw";
import { title, subtitle, moduleInfo } from "@/constant/index";
import { RouterLink, RouterView } from "vue-router";
import EducationlevelView from "../EducationlevelView/index.vue";
import EnergylevelView from "../EnergylevelView/index.vue";
import TitleView from "../TitleView/index.vue";
import RestsView from "../RestsView/index.vue";
import UpPersonneinfo from "./PuJiangNurseInfoView/Personne.vue";
import OutpatientEmergencyView from "./PuJiangNurseInfoView/OutpatientEmergency.vue";
export default defineComponent({
  components: {
    EducationlevelView,
    EnergylevelView,
    TitleView,
    RestsView,
    UpPersonneinfo,
    OutpatientEmergencyView
  },
  setup() {
    // * 颜色
    const decorationColors = ["#568aea", "#000000"];
    // * 加载标识
    const loading = ref<boolean>(true);
    // * 时间内容
    const timeInfo = reactive({
      setInterval: 0,
      dateDay: "",
      dateYear: "",
      dateWeek: "",
    });
    // * 适配处理
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
    // 生命周期
    onMounted(() => {
      cancelLoading();
      handleTime();
      // todo 屏幕适应
      windowDraw();
      calcRate();
    });

    onUnmounted(() => {
      unWindowDraw();
      clearInterval(timeInfo.setInterval);
    });

    // methods
    // todo 处理 loading 展示
    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false;
      }, 500);
    };

    // todo 处理时间监听
    const handleTime = () => {
      timeInfo.setInterval = setInterval(() => {
        const date = new Date();
        timeInfo.dateDay = formatTime(date, "HH: mm: ss");
        timeInfo.dateYear = formatTime(date, "yyyy-MM-dd");
        timeInfo.dateWeek = WEEK[date.getDay()];
      }, 1000);
    };

//将数字转换为中文数字
     const getUpTtile = (num: number) => {
        let result = '';
      switch (num) {
        case 1:
          result = '护理部';
          break;
           case 2:
          result = '九病区';
          break;
           case 3:
          result = '十病区';
          break;
           case 4:
          result = '十一病区';
          break;
           case 5:
          result = '十二区';
          break;
           case 6:
          result = '十三病区';
          break;
           case 7:
          result = '十四区';
          break;
           case 8:
          result = '三十病区';
          break;
          default:
          result='';
          break;
      }
      return result;
    };
      const getdownTtile = (num: number) => {
  let result = '';
      switch (num) {
         case 1:
          result = '浦江特需病区';
          break;
          case 2:
          result = '浦江眼门诊';
          break;
          case 3:
          result = '浦江耳门诊';
          break;
          case 4:
          result = '浦江急诊';
          break;
          case 5:
          result = '浦江手术室';
          break;
          default:
          result='';
          break;
      }
      return result;
    };

    return {
      loading,
      timeInfo,
      appRef,
      title,
      subtitle,
      moduleInfo,
      getUpTtile,
      getdownTtile,
    };
  },
  methods: {
    goToHomePage() {
      this.$router.push({ name: "Index" });
    },
    goToFenYangPersonnePage()
    {
       this.$router.push({ name: "FenYangPersonne" });
    },
    goToAllPage()
    {
      this.$router.push({ name: "NurseStaffInformation" });
    }
  },
});
</script>
  
  <style lang="scss" scoped>
  @import "Css/index.scss";
</style>
  